import ZenTabs from "@module/../components/ZenUI/ZenTabs/ZenTabs";
import ZenRadio from "@module/../components/ZenUI/ZenRadio/ZenRadio";
import ZenCheckbox from "@module/../components/ZenUI/ZenCheckbox/ZenCheckbox";
import useForm from "@module/useForm";
import UserA from "./userA";
import UserB from "./userB";
import ZenAutoComplete from "@root/components/ZenUI/ZenAutoComplete/ZenAutoComplete";
import ZenDragable from "@root/components/ZenUI/ZenDragable/ZenDragable";

export default function Demo(props) {
    const {
        formData,
        handleChange,
        handleSubmit,
        updateFormData,
        validations,
        addValidate,
        addValidateMulti
    } = useForm(doSubmit, {}, "testForm");

    const [currentState, updateState] = usePartState({});

    function doSubmit() {
        console.log(formData);
    }

    function validate1(value) {
        console.log(value);
        return value.length > 2 ? "" : "长度小于2";
    }

    function LabelComponent(props) {
        return <span className="test">测试的内容</span>;
    }

    const radioList = [
        {
            label: "健身",
            value: "3",
            isDisabled: true
        },
        {
            label: "修行",
            value: "9"
        },
        {
            label: "冥想",
            value: "10"
        }
    ];

    const checkboxList = [
        {
            label: LabelComponent,
            value: "3",
            isDisabled: true
        },
        {
            label: LabelComponent,
            value: false
        },
        {
            label: LabelComponent,
            value: "10"
        }
    ];

    React.useEffect(() => {
        updateFormData({ test2: 9, test3: checkboxList });
    }, []);

    global.formData = formData;

    function clickCallback() {
        console.log("someCallback");
        updateState({ dataList: dataList.concat([3]) });
    }

    function changeCallback(e) {
        updateState({ dataList: dataList.concat([3]) });
    }

    const dataList = [
        "EWSR1",
        "EW 7197",
        "EW-7197",
        "EWS Antibody",
        "EWSR1 Antibody"
    ];

    React.useEffect(() => {
        updateState({ dataList: dataList });
    }, []);

    let config = {
        showHint: true,
        containClass: "",
        inputClass: "",
        hintWrapClass: "",
        hintClass: ""
    };

    return (
        <div className="zen_p-20">
            <div className="zen_m-v-15">
                <ZenDragable>测试的数据</ZenDragable>
            </div>
            {/*<UserB />*/}
            {/*<UserA />*/}
            <div className="zen_p-20">
                <form name="testForm" onSubmit={handleSubmit}>
                    <ZenRadio
                        formData={formData}
                        name="test2"
                        radioList={radioList}
                        change={handleChange}
                    />
                    <ZenCheckbox
                        formData={formData}
                        name="test3"
                        change={handleChange}
                    />
                    <button>提交</button>
                </form>
            </div>

            <ZenAutoComplete
                onClickCallback={clickCallback}
                onChangeCallback={changeCallback}
                dataList={currentState.dataList}
                configOptions={config}
            />

            <ZenTabs activeindex="2" dynamicload="true" className="test">
                <ZenTabs.Tab title="标签1" className="zen_m-r-4">
                    内容1
                </ZenTabs.Tab>
                <ZenTabs.Tab title="标签2" className="zen_m-r-4">
                    内容2
                </ZenTabs.Tab>
                <ZenTabs.Tab title="标签3" className="zen_m-r-4">
                    内容3
                </ZenTabs.Tab>
                <ZenTabs.Tab title="标签4" className="zen_m-r-4">
                    内容4
                </ZenTabs.Tab>
            </ZenTabs>
        </div>
    );
}
